<template>
	<el-form ref="form" :rules="rules" :model="form" label-width="80px">
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="车牌号码">
				<car-input v-model="form.plateNumber"></car-input>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="经办人">
				<el-input v-model="form.inspectionPerson"></el-input>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="缴费时间" prop="inspectionDate">
				<el-date-picker :picker-options="pickerOptions" v-model="form.inspectionDate" type="daterange" placeholder="选择缴费时间..." value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>
		</el-col>
		<el-col :span="8" class="selectC-cont-item">
			<el-form-item label="状态">
				<el-select v-model="form.deleteFlag">
					<el-option value="" label="所有"></el-option>
					<el-option value="2" label="作废中"></el-option>
					<el-option v-for="item in $dicCache.getCacheByMark('SFDM')" :key="item.dicVal" :label="item.dicName=='是'?'已作废':'正常'" :value="item.dicVal"></el-option>
				</el-select>
			</el-form-item>
		</el-col>
		<el-col :span="24">
			<el-button class="submit" round @click="submitForm">提 交</el-button>
		</el-col>
		<resultTable v-model="tableShow" :queryData="form"></resultTable>
	</el-form>
</template>

<script>
	import resultTable from "@/components/zhcx/table-cljc";
	import carInput from "@/components/car-input";

	export default {
		name: "query-cljc",
		components: {
			resultTable,
			carInput
		},
		data() {
			return {
				form: {
					plateNumber: '',
					inspectionPerson: '',
					inspectionDate: [],
					deleteFlag: '0'
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				rules: {
					inspectionDate: [{
						required: true,
						message: "请选择缴费时间！",
						trigger: "blur"
					}],
				},
				tableShow: false
			};
		},
		methods: {
			submitForm() {
				this.$refs.form.validate(valid => {
					if(!valid) {
						return false;
					}
					this.tableShow = true;
				});
			}
		}
	}
</script>

<style scoped>
	.el-range-editor.el-input__inner {
		width: 100% !important;
	}
	
	.selectC-cont-item .el-select {
		width: 100%;
	}
	
	.submit {
		padding: 12px 64px !important;
		background: url("/static/img/jianbian.jpg");
		background-size: 100% 100%;
		height: 40px !important;
		border: 0 !important;
		color: #fff;
		margin: 0 auto;
		display: block !important;
		position: relative;
		top: 50px;
	}
</style>